import React, { Component } from 'react';
import { secondCategory } from '../../utils/api';
// import { secondCategory } from '../utils/api';
import context from '../../utils/context';
import {withRouter} from 'react-router-dom'
class TabRight extends Component {


    state = {
        currentIndex: 0,
        id: '',
        list: [],
        subNavs:[]
    }

    componentDidMount() {
        //注册事件(绑定事件)
        // console.log('接收到',this.state.tabs[index].id); 
        context.addListener('saveIndex', (index) => {
            //   console.log('接收到',this.state.tabs[index].id);
            this.setState({
                currentIndex: index,
                id: index
            },()=>{
               secondCategory({ id: index }).then((res) => {
                // console.log(res);
                this.setState({
                    list: res.data.subcate.subcategory,
                })

            }) 
            })
            
        })
    }
    handleChange(id){
        console.log(this.props);
        this.props.history.push({pathname:'/index/goods',state:{id}})
    }
    render() {
        return (
            <div className='tabright'>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className='cate' key={index}>

                                <div className='name'>{item.name}</div>

                                <div className='good'>
                                    {
                                        item.subNavs.map((item, index) => {
                                            return (
                                                <div className='subname' key={index} onClick={()=>{this.handleChange(item.id)}}>
                                                    <img className='img-box' src={item.pic} alt="" />
                                                    <div className='inname'>{item.name}</div>
                                                </div>

                                            )
                                        })
                                    }
                                </div>


                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default withRouter(TabRight); 